<div class="pop_up">
    <div class="pop_up_main">
        <div class="pop_up_tab">
            <div class="tab attrSetTab">
                <a href="javascript:void(0)" rel="diy_baseSet" class="on">基本设置</a>
                <a href="javascript:void(0)" rel="diy_customContent">模板设置</a>
            </div>
        </div>
        <div class="pop_up_box">
            <ul class="pop_up_box_form"  id="diy_baseSet">
                <li>
                    <div class="c1">
                        数据源：
                    </div>
                    <div class="c2">
                        <div>
                            <label class="mr10">
                                <input name="source" type="checkbox" value="space" class="param_post in_mr5" />普通动态
                            </label>
                            <label class="mr10">
                                <input name="source" type="checkbox" value="ask" class="param_post in_mr5" />知道动态
                            </label>
                            <label class="mr10">
                                <input name="source" type="checkbox" value="record" class="param_post in_mr5" />记录动态
                            </label>
                            <label class="mr10">
                                <input name="source" type="checkbox" value="share" class="param_post in_mr5" />分享动态
                            </label>
                            <label class="mr10">
                                <input name="source" type="checkbox" value="group" class="param_post in_mr5" />群主动态
                            </label>
                            <label class="mr10">
                                <input name="source" type="checkbox" value="blog" class="param_post in_mr5" />日志动态
                            </label>
                            <label class="mr10">
                                <input name="source" type="checkbox" value="bbs" class="param_post in_mr5" />论坛动态
                            </label>
                        </div>
                    </div>
                </li>
            
                <li>
                    <div class="c1">
                        群组动态：
                    </div>
                    <div class="c2">
                         <textarea cols="" rows="5" id="group" class="text param_post" style="width:90%;"/>
                           	 <br/>
                           		 输入团队ID,多条数据用“,”分隔,留空为不限制） 
                    </div>
                </li>
				<li>
                    <div class="c1">
                        用户动态：
                    </div>
                    <div class="c2">
                         <textarea cols="" rows="5" id="user" class="text param_post" style="width:90%;"/>
                           	 <br/>
                           		 输入用户ID,多条数据用“,”分隔,留空为不限制） 
                    </div>
                </li>
                <li>
                    <div class="c1">
                        结果数：
                    </div>
                    <div class="c2">
                        <input id="limit" value="10" class="param_post text"/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        标题：
                    </div>
                    <div class="c2">
                        <input id="title" value="" class="param_post text"/>
                    </div>
                </li>
				<li>
                    <div class="c1">
                        标题截取：
                    </div>
                    <div class="c2">
                        <input id="words" value="10" class="param_post text"/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        模板：
                    </div>
                    <div class="c2">
                        <select name="u" id="style" class="param_post text">
                            <option value="list" selected="selected">简单列表</option>
	                       <php>if(isset($html)){</php>
									<option value="{$attr['style']}" selected="selected">自定义模板</option>
							<php>}</php>
                        </select>
                        <a class="ml5" href="javascript:void(0)" onclick="editTpl($('#style').val())">编辑模板</a>
                    </div>
                </li>
			    <li>
                    <div class="c1">
                        模板高度：
                    </div>
                    <div class="c2">
                        <input id="tplHeight" value="" class="param_post text"/>(请输入完整高度。px为单位。可以为百分比)
                    </div>
                </li>
                <!--<li>
                    <div class="c1">
                        缓存时间：
                    </div>
                    <div class="c2">
                        <select name="u" id="cacheTime" class="param_post text">
                            <option value="0">不缓存</option>
                            <php>
                                for($i=1;$i<=10;$i++){
                            </php>
                            <option value="{$i}">{$i}分钟</option>
                            <php>
                                }
                            </php>
                        </select>
                    </div>
                </li>-->
            </ul>
			  <ul class="pop_up_box_form" id="diy_customContent" style="display:none;">
                <li>
                    <div class="c1">
                        修改模板：
                    </div>
                    <div class="c2">
                        <textarea cols="" rows="5" id="customContent" class="text" style="width:90%;overflow: auto;height:400px;">{$html}</textarea>
                        <br/>
                    </div>
                </li>
                <li>
                	<div class="c1">
                        &nbsp;
                    </div>
                    <div class="c2">
                      <input class="btn_sea" type="submit" id="diy_saveTpl" value="保存模板">
                        <br/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="preview" class="preview_r">
    </div>
</div>
<script>
                                                            	var index= '{$index}';
                                                            	var layout = '{$layout}';
                                                            	var parentId = '{$parentId}';
                                                            	var id = '{$id}';
                                                            	var namespace = '{$_GET['tagName']}';
                                                                var postData = new Array();
                                                                var defaultAttr = new Array();
                                                                var hasDefault = false;
                                                                var TplContent = "";
                                                                var customTpl = '';
                                                                var time = 'custom{:time()}';
                                                                var sign = "{$_GET['sign']}"
                                                                var customTplCount = 1;
                                                                var tplData = new Array();
        						
        						<php>if(!empty($attr)){</php>
        							hasDefault = true;
        						<php>}</php>
        				
                            <volist name="attr" id="vo">
								<php>if($key == 'head_link'){</php>
									defaultAttr["{$key}"] = {$vo};
								<php>}else{</php>
            						defaultAttr["{$key}"] = "{$vo}";
								<php>}</php>
            				</volist>
        				    $(function(){
        					customTpl = $('#customContent').val();
                            if (hasDefault) {
                                $('.param_post').each(function(){
                                    if ($(this).attr('type') == "radio") {
                                        var name = $(this).attr('name');
                                        if ($(this).val() == defaultAttr[name]) {
                                           		$(this).attr('checked','checked');
        										if(name == "source"){
        											var tempId = $(this).attr('rel');
        											$('#' + tempId).show();
        	                                        $('#' + tempId + " textarea").focus();
        											$('#' + tempId + " select").focus();
        	                                        $('.param_select').not($('#' + tempId)).hide();
        										}
                                        }
                                    }else if($(this).attr('type') == "checkbox"){
        								 var name = $(this).attr('name')
        								
        								 if(defaultAttr[name].indexOf(',') != -1){
        								 	 var tempArray = defaultAttr[name].split(',');
        									 if ($.inArray($(this).val(),tempArray) != -1) {
        	                                   		$(this).attr('checked','checked');
        	                                }
        								 }
        	
        							}
                                  	else{
             								if( !$(this).attr('multiple') || $(this).attr('multiple') == 'undefined'){
            									$(this).val(defaultAttr[$(this).attr('id')]);
            								}
        							}
                                });
                           }
                        });
  function preview(){
                                var sendData = getPostData();
                                $.ajax({
                                    type: "POST",
                                    url: APP + '&mod=Diy&act=previewModel',
                                    data: sendData,
                                    dataType: 'json',
                                    success: function(result){
                                        $('#preview').html(result.html);
                                        var content = '<div id="diy_copyHtmlContent">\
                                            		复制源代码:<input type="text" id="copyHtmlContent" onclick="select();" style="width:150px;" />\
                                        		</div>'
										var widget = '<div id="diy_copyHtmlContent">\
                                            		复制标签:<input type="text" id="copyWidgetContent" onclick="select();" style="width:150px;" />\
                                        		</div>'		
                                        $('#preview').append(content);
										$('#preview').append(widget);
                                        $('#diy_copyHtmlContent');
                                        $('#copyHtmlContent').val(result.html).bind('click',function(){
											copyToClipboard(result.html);
										});
										$('#copyWidgetContent').val(result.widget).bind('click',function(){
											copyToClipboard(result.widget);
										});
										//$('#copyHtml').click();
                                    }
                                });
                            }
                                                            	
                                                            	function savemodel(){
                        											var sendData = getPostData();
                                                        			$.ajax({
                                                        				type : "POST",
                                                        				url  : APP + '&mod=Diy&act=saveModel',
                                                        				data : sendData,
                                                        				dataType : 'json',
                                                        				success : function(result){
                                                         					//var jsonData = eval('('+result+')');
                                                            		 		frameArray[parentId][layout][index] = result['sign'];
                                                            		 		 if($('#'+id).html() == null){
                                                        			  		 $('#placeholder').html(result['html']);
                                                            		 		 $('#placeholder')
                                                            		 			.removeAttr('class')
                                                            					.removeAttr('style')
                                                            					.addClass('mb10')
                                                            					.attr('id',id)
                                                            					.attr('rel',namespace)
        																		.attr('sign',result['sign'])
                                                            		 			.prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                                    		        		 }else{
                                                    		    			 	$('#'+id).html(result['html']).attr('sign',result['sign'])
        ;
                                                    		    				$('#'+id).prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                                    		    
                                                    		    			 }
                                                        				}
                                                        			});
                                                            		
                                                            	}
                                    							$('.radio_select').click(function(){
                                    								if($(this).attr('checked')){
                                    									$('#'+$(this).attr('rel')).show();
                        												$('#'+$(this).attr('rel')+" textarea").focus();
                                    								}
                                    								$('.param_select').not($('#'+$(this).attr('rel'))).hide();
                                    								//alert($('.param_select').not($('#'+$(this).attr('rel'))).html());
                                    							})
                                								
                            	    							function changStyle(_this){
                            										if(_this.val() == 'list'){
                            											$('#uploadAttach').show();
                            										}else{
                            											$('#uploadAttach').hide();
                        												$("#attach_upload_data input[name='attach[]']").each(function(){
                            												$(this).remove();
                            											});
                            										}
                                								}
                            									
                                                                function getPostData(){
                                                                    var data = new Array();
                                                                    var result;
                                                                    var checkedName = new Array();
                                                                    $('.param_post').each(function(){
                                                                        switch ($(this).attr('type')) {
                                                                            case "checkbox":
                                                                                if ($(this).attr('checked')) {
                                                                                    var postKey = 'PARAM_' + $(this).attr('name');
                                                                                    checkedName.push($(this).val());
                                                                                    break;
                                                                                }
                                                                                else {
                                                                                    return true;
                                                                                }
                                                                            case "radio":
                                                                                    if ($(this).attr('checked')) {
                                                                                        var postKey = 'PARAM_' + $(this).attr('name');
                                                                                    }
                                                                                    else {
                                                                                        return true;
                                                                                    }
                                                                                data[postKey] = $(this).val();
                                                                                break;
                                                                            default:
                                                                                var postKey = 'PARAM_' + $(this).attr('id');
        																		 data[postKey] = $(this).val();
                                                                        }
                                                                    });

                                                                    data['PARAM_source'] = checkedName.join(',');
                                                                    var result = 'tagName=' + namespace;
                                                                    if($('#style').val().indexOf('custom') != -1){
																		var value = customTpl.replace(/&/g,"[@]");
																		data['customContent'] = value;
																	}
                                                                    for (var one in data) {
                                                                        result += '&' + one + '=' + data[one];
                                                                    }
                                                                    return result;
                                                                }
                                								        				
    					$('.attrSetTab a').click(function(){
    						var rel = $(this).attr('rel');
							if(rel == "diy_customContent"){
								getTpl($('#style').val());
							}else{
								if($('#customContent').val() != TplContent){
									time = time + new String( customTplCount++ );
									customTpl = $('#customContent').val();
									var last = $('#style option:last').val();
									if( last.indexOf('custom') == -1 ){
										$('#style').append('<option value="'+time+'" selected>自定义模板</option>');
									}else{
										$('#style option:last').val(time).attr('selected','selected');
									}
								}
							}
							
							$(this).addClass('on');
							$('#tb_content_list').children('p').show();
    						$('.attrSetTab').children().not($(this)).removeClass('on');
    						$('.pop_up_box').children().not($('#' + rel)).hide();
    						$('#'+rel).show();
    					})
    					
        				function editTpl(tpl){
    						getTpl(tpl);
							$('.attrSetTab a').each(function(){
								if($(this).attr('rel') == 'diy_baseSet'){
									$(this).removeClass('on');
								}else{
									$(this).addClass('on');
								}
							})
							$('.attrSetTab a[rel=diy_customContent]').addClass('on');
							$('.attrSetTab a[rel=diy_baseSet]').removeClass('on');
							
							//保存模板
							$('#diy_saveTpl').click(function(){
								$('.attrSetTab a[rel=diy_baseSet]').click();	
							})
							$('#tb_content_list').children('p').hide();
    						$('#diy_baseSet').hide();
    						$('#diy_customContent').show();
        				}
    					function getTpl(tpl){

							
							if (tpl != time) {
								if(typeof(tplData[tpl]) != 'undefined'){
									$('#customContent').val(tplData[tpl]);
									TplContent = tplData[tpl];
									return ;
								}
								
								$.post(APP + '&mod=Diy&act=getTpl', {
									tpl: tpl,
									tagName: namespace,
									sign:sign
								}, function(result){
									$('#customContent').val(result);
									tplData[tpl] = result;
									TplContent = result;
									$('#style').val(tpl);
								});
							}else{
								$('#customContent').val(customTpl);
							}
    					}
</script>
